<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dianjiang</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="./style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="app">
    <section class="top">
        <img class="top_img" src="images/default_dress1.png" alt="default_dress">
    </section>
    <section class="topNavBar">
        <div class="row">
            <div class="left">
                <span class="list"></span>
                <span class="search"></span>
            </div>
            <div class="center">
                <header>BELLERIS</header>
            </div>
            <div class="right">
                <span class="user"></span>
                <span class="cart"></span>
            </div>
        </div>
    </section>
    <section class="header">
        <h2 class="title">Men's Running Shoes</h2>
        <p class="content">Attack the pavement,
            trails or any route with men's running shoes equipped with the latest Nike footwear technologies.
            Featuring signature styles like the Nike Epic React, Zoom Fly and Pegasus,
            men's running shoes offer options for all runners and running styles.</p>
    </section>

    <section class="main">
        <nav class="nav">
            <div class="nav_filter">
                <p class="filter_title">Filter</p>
                <p class="filter_text">Category</p>
                <p class="filter_text msg">Men's Running Shoes</p>
            </div>

            <div class="nav_list">
                <ul class="nav_list_wrapper">
                    <li class="nav_list_item cur_item">
                        <div class="slider"></div>
                        <div class="item_text_wrapper">
                            <span class="list_item_title">Price</span><span class="arrow">&gt;</span>
                        </div>

                    </li>
                    <li class="nav_list_item">
                        <div class="slider"></div>
                        <div class="item_text_wrapper">
                            <span class="list_item_title">Product Type</span><span class="arrow">&gt;</span>
                        </div>
                    </li>
                    <li class="nav_list_item">
                        <div class="slider"></div>
                        <div class="item_text_wrapper">
                            <span class="list_item_title">Colour</span><span class="arrow">&gt;</span>
                        </div>
                    </li>
                    <li class="nav_list_item">
                        <div class="slider"></div>
                        <div class="item_text_wrapper">
                            <span class="list_item_title">Size</span><span class="arrow">&gt;</span>
                        </div>
                    </li>
                    <li class="nav_list_item">
                        <div class="slider"></div>
                        <div class="item_text_wrapper">
                            <span class="list_item_title">Fit</span><span class="arrow">&gt;</span>
                        </div>
                   </li>
                    <li class="nav_list_item">
                        <div class="slider"></div>
                        <div class="item_text_wrapper">
                            <span class="list_item_title">Brands</span><span class="arrow">&gt;</span>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>
        <section class="goods-container">
            <section class="top_toolBar">
<!--                PS: product scenes-->
                <div class="switch_PS">
                    <span class="option cur_opt">Product</span><span class="division"></span> <span class="option">Scenes</span>
                </div>
                <div class="switch_verticalBar">
                    <span class="combinedShape gray_four"></span>
                    <span class="combinedShape black_three"></span>
                    <span class="combinedShape gray_two"></span>
                </div>
                <div class="select_match">
                    <select name="matchMethods" class="matchMethods" id="matchMethods">
                        <option value="Best Match">Best Match</option>
                        <option value="Best Match">Best Match</option>
                        <option value="Best Match">Best Match</option>
                        <option value="Best Match">Best Match</option>
                    </select>
                </div>
                <span class="statistic"><number>315</number>result</span>
            </section>
            <section class="top_toolBar_Mobile">
                <div class="row">
                    <div class="switch_PS_M">
                        <span class="optionM cur_opt_M scene">SCENES</span>
                        <span class="optionM ">PRODUCT</span>
                    </div>
                    <div class="switch_columnNum">
                        <span class="simple"></span>
                        <span class="double"></span>
                    </div>
                </div>
                <div class="row">
                    <span class="sortMethods">BestMatch</span>
                    <span class="shopNum"><number>315</number>results</span>
                </div>
            </section>
            <section class="shopList">
                <ul class="shopList_wrapper">
                    <li class="shopList_item">
                        <img src="./images/default_dress_item.png" alt="默认裙子" class="shop-image">
                        <p class="shop_msg">Bow Tie Front Stripe Slip Dress</p>
                        <div class="shop_price">
                            <span class="price price_now">$256</span>
                            <span class="price price_pre">$667</span>
                        </div>
                    </li>
                    <li class="shopList_item">
                        <img src="./images/default_dress_item.png" alt="默认裙子" class="shop-image">
                        <p class="shop_msg">Bow Tie Front Stripe Slip Dress</p>
                        <div class="shop_price">
                            <span class="price price_now">$256</span>
                            <span class="price price_pre">$667</span>
                        </div>
                    </li>
                    <li class="shopList_item">
                        <img src="./images/default_dress_item.png" alt="默认裙子" class="shop-image">
                        <p class="shop_msg">Bow Tie Front Stripe Slip Dress</p>
                        <div class="shop_price">
                            <span class="price price_now">$256</span>
                            <span class="price price_pre">$667</span>
                        </div>
                    </li>
                    <li class="shopList_item">
                        <img src="./images/default_dress_item.png" alt="默认裙子" class="shop-image">
                        <p class="shop_msg">Bow Tie Front Stripe Slip Dress</p>
                        <div class="shop_price">
                            <span class="price price_now">$256</span>
                            <span class="price price_pre">$667</span>
                        </div>
                    </li>
                    <li class="shopList_item">
                        <img src="./images/default_dress_item.png" alt="默认裙子" class="shop-image">
                        <p class="shop_msg">Bow Tie Front Stripe Slip Dress</p>
                        <div class="shop_price">
                            <span class="price price_now">$256</span>
                            <span class="price price_pre">$667</span>
                        </div>
                    </li>
                    <li class="shopList_item">
                        <img src="./images/default_dress_item.png" alt="默认裙子" class="shop-image">
                        <p class="shop_msg">Bow Tie Front Stripe Slip Dress</p>
                        <div class="shop_price">
                            <span class="price price_now">$256</span>
                            <span class="price price_pre">$667</span>
                        </div>
                    </li>
                    <li class="shopList_item">
                        <img src="./images/default_dress_item.png" alt="默认裙子" class="shop-image">
                        <p class="shop_msg">Bow Tie Front Stripe Slip Dress</p>
                        <div class="shop_price">
                            <span class="price price_now">$256</span>
                            <span class="price price_pre">$667</span>
                        </div>
                    </li>
                    <li class="shopList_item">
                        <img src="./images/default_dress_item.png" alt="默认裙子" class="shop-image">
                        <p class="shop_msg">Bow Tie Front Stripe Slip Dress</p>
                        <div class="shop_price">
                            <span class="price price_now">$256</span>
                            <span class="price price_pre">$667</span>
                        </div>
                    </li>
                    <li class="shopList_item">
                        <img src="./images/default_dress_item.png" alt="默认裙子" class="shop-image">
                        <p class="shop_msg">Bow Tie Front Stripe Slip Dress</p>
                        <div class="shop_price">
                            <span class="price price_now">$256</span>
                            <span class="price price_pre">$667</span>
                        </div>
                    </li>
                    <li class="shopList_item">
                        <img src="./images/default_dress_item.png" alt="默认裙子" class="shop-image">
                        <p class="shop_msg">Bow Tie Front Stripe Slip Dress</p>
                        <div class="shop_price">
                            <span class="price price_now">$256</span>
                            <span class="price price_pre">$667</span>
                        </div>
                    </li>
                    <li class="shopList_item">
                        <img src="./images/default_dress_item.png" alt="默认裙子" class="shop-image">
                        <p class="shop_msg">Bow Tie Front Stripe Slip Dress</p>
                        <div class="shop_price">
                            <span class="price price_now">$256</span>
                            <span class="price price_pre">$667</span>
                        </div>
                    </li>
                    <li class="shopList_item">
                        <img src="./images/default_dress_item.png" alt="默认裙子" class="shop-image">
                        <p class="shop_msg">Bow Tie Front Stripe Slip Dress</p>
                        <div class="shop_price">
                            <span class="price price_now">$256</span>
                            <span class="price price_pre">$667</span>
                        </div>
                    </li>
                </ul>
            </section>
        </section>
    </section>

</div>
</body>
</html>